<template>
	<view class="changeAccountNumber">
		<view class="tips">轻触头像以切换账号</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="item.id" @click="tochangeUser(item)">
				<view class="main">
					<view class="left">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="right">
						<view class="title">{{item.nickName}}</view>
						<view class="explain">ID {{item.id}} | 绑定“{{item.studioName}}”工作室</view>
					</view>
				</view>
				<view class="msg" v-if="item.pendingOrderCount||item.notReadMessageCount||item.pendingApplyStudioCount">
					<text class="option" v-if="item.pendingOrderCount">待接单：{{item.pendingOrderCount}}</text>
					<text class="option" v-if="item.notReadMessageCount">未读消息：{{item.notReadMessageCount}}</text>
					<text class="option" v-if="item.pendingApplyStudioCount">待修改陪宠师申请：{{item.pendingApplyStudioCount}}</text> 
				</view>
				<view class="nowLogin" v-if="index==0">当前登录</view>
			</view>
		</view>
		<view class="list">
			<view class="item" @tap="changeAccount(0)">
				<view class="main" >
					<view class="other">
						<text class="others otherX"></text>
						<text class="others otherY"></text>
					</view>
					<view class="text" >登录其它账号</view>
				</view>
			</view>
			<view class="item" @tap="showPopup">
				<view class="main">
					<view class="other">
						<text class="others otherX"></text>
						<text class="others otherY"></text>
					</view>
					<view class="text" >注册新账号</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="popup_title">选择注册方式</view>
				<view class="newPhone" @tap="changeAccount(1)">新手机号注册</view>
				<view class="oldPhone" @tap="changeAccount(2)">
					<view>当前手机号再注册</view>
					<text>({{userInfo.phone}})</text>
				</view>
				<view class="btn" @tap="hide">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import api from '@/api'
import {onShow} from '@dcloudio/uni-app'
import { useUserStoreToRefs } from '@/store/useUserStore'
import { useLoginAccount } from '@/hooks/useLogin';
const { userInfo } = useUserStoreToRefs()
onShow(()=>{
	getUserAccountList()
})

const tochangeUser = (item)=>{
	useLoginAccount({
		userId:item.id
	})
}

//获取当前号帐号关联列表
const list = ref([])
const getUserAccountList = async() =>{
	uni.getSystemInfo({
		success:async (e)=>{
			const res:any = await api({
				method: 'get',
				url: `/mall/user/v2/getUserAccountList?deviceId=${e.deviceId}`,
			})
			list.value = res.data
		},
	})	
}

const changeAccount = (num:number)=>{
	// registerWay 注册方式：0-第一次登录注册，1-切换账号时选择新手机号注册，2-切换账号时选择当前手机号再注册账号
	// phone areaCode
    let url = '/pages/login/verify'
	if(num!=0){
		url+=`?registerWay=${num}&areaCode=86&phone=${userInfo.value.phone}`
	}
	uni.navigateTo({
		url:url
	})
}
const popup = ref(null)
const showPopup = ()=>{
	popup.value.open('bottom')
}
const hide = ()=>{
	popup.value.close()
}
</script>

<style lang="scss" scoped>
	.changeAccountNumber{
		padding: 0 32rpx;
		padding-bottom: calc(var(--safe-area-bottom) + 8rpx);
		background-color: #F9F6F6;
		.tips{
			padding: 80rpx 0;
			font-size: 48rpx;
			font-weight: bold;
			color: #1A1A1A;
			text-align: center;
		}
		.other{
			position: relative;
			width: 100rpx;
			height: 100rpx;
			border-radius: 200rpx;
			border: 2rpx solid #CCCCCC;
			.others{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				background: #CCCCCC;
				border-radius: 4rpx;
			}
			.otherX{
				width: 48rpx;
				height: 8rpx;
			}
			.otherY{
				width: 8rpx;
				height: 48rpx;
			}
		}
		.text{
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: bold;
			margin-left: 16rpx;
		}
		.list{
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item{
				position: relative;
				border-radius: 24rpx;
				background-color: #fff;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				.main{
					display: flex;
					align-items: center;
					.left{
						image{
							width: 96rpx;
							height: 96rpx;
							border-radius: 50%;
						}
					}
					.right{
						margin-left: 16rpx;
						.title{
							font-size: 36rpx;
							font-weight: bold;
							color: #1A1A1A;
						}
						.explain{
							font-size: 26rpx;
							color: #7C807F;
							margin-top: 8rpx;
						}
					}
				}
				.msg{
					font-size: 24rpx;
					color: #7C807F;
					background-color: #F5F6F7;
					border-radius: 8rpx;
					margin-top: 32rpx;
					line-height: 56rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					.option{
						position: relative;
						margin-right: 40rpx;
						&:last-child{
							margin-right: 0;
							&::after{
								content: none;
							}
						}
						&::after{
							content: '';
							position: absolute;
							right: -20rpx;
							transform: translateY(-50%);
							top: 50%;
							height: 26rpx;
							width: 1rpx;
							background-color: #7C807F;
						}
					}
				}
				.nowLogin{
					position: absolute;
					right: 0;
					top: 0;
					width: 146rpx;
					line-height: 60rpx;
					background: #FF6084;
					border-radius: 0px 24rpx 0px 24rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
.popup-content{
	border-radius: 24rpx 24rpx 0px 0px;
	view{
		text-align: center;
	}
	.popup_title{
		box-sizing: border-box;
		font-weight: bold;
		padding: 40rpx 0;
		font-size: 36rpx;
		color: #1A1A1A;
	}
	.newPhone{
		margin: 40rpx 0 48rpx;
		font-size: 30rpx;
		color: #1B2120;
	}
	.oldPhone{
		width: calc(100% - 96rpx);
		margin-left: 48rpx;
		padding: 48rpx 0 40rpx;
		border-top: 2rpx solid #F5F6F7;
		font-size: 30rpx;
		color: #1B2120;
		text{
			font-size: 24rpx;
			color: #7C807F;
			margin-top: 8rpx;
		}
	}
	.btn{
		font-size: 30rpx;
		color: #1B2120;
		padding: 30rpx 0;
		padding-bottom: calc(var(--safe-area-bottom) + 16rpx);
		border-top: 16rpx solid #F9F6F6;
	}
}
</style>